import React, { useEffect, useRef, useState } from 'react';
import { Button, message, Transfer } from 'antd';
import type { ProFormInstance } from '@ant-design/pro-form';
import ProForm, {
  DrawerForm,
  ProFormText,
  ProFormSwitch,
  ProFormCheckbox,
} from '@ant-design/pro-form';
import { request } from 'umi';
import { api } from '@/global';
type RolePermissionType = {
  id: number;
  moduleCode: string;
  moduleName: string;
  moduleActionName: string;
  isSelect: boolean;
  isDefault: boolean;
};

export default (props) => {
  const formRef = useRef<ProFormInstance>();
  const [rolePermissionList, setRolePermissionList] = useState({});
  const [row, setRow] = useState<string[]>([]);

  useEffect(() => {
    async function getRolePermission(id: number) {
      const data = await request(api.getRolePermission, {
        params: { id },
      });
      await setRow(Object.keys(data.data));

      await setRolePermissionList(data.data);
    }

    getRolePermission(props.currentId);
  }, []);
  return (
    <div style={{ display: props.currentId === 7 ? 'none' : '' }}>
      <DrawerForm<{
        name: string;
        company: string;
      }>
        title="修改权限"
        formRef={formRef}
        trigger={<a>修改权限</a>}
        autoFocusFirstInput
        drawerProps={{
          destroyOnClose: true,
        }}
        onFinish={async (values) => {
          const permission: number | string[] = [];
          const result: any = {};
          Object.keys(values).forEach((item) => {
            if (Number(item)) {
              if (values[item]) {
                permission.push(item);
              }
            } else {
              result[item] = values[item];
            }
          });
          result['permission'] = permission;
          result['id'] = props?.currentId;
          const id = props?.currentId;

          const data = await request(api.insertOrUpdateRole, {
            method: 'POST',

            data: {
              ...result,
            },
          });

          if (data.success) {
            message.info('修改成功');
            props.reloadPage();
            const d = await request(api.getRolePermission, {
              params: { id },
            });
            await setRow(Object.keys(d.data));
            await setRolePermissionList(d.data);
            return true;
          } else {
            message.info('修改失败');

            return true;
          }

          return true;
        }}
      >
        <ProForm.Group>
          <ProFormText
            name="roleName"
            width="md"
            initialValue={props.curentName}
            label="角色名称"
            placeholder="请输入角色名称"
          />
        </ProForm.Group>

        <ProForm.Group>
          <ProFormText
            name="roleDesc"
            initialValue={props.curentDesc}
            width="md"
            label="角色描述"
            placeholder="请输入角色描述"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormSwitch
            name="isDefault"
            label="是否为内置角色"
            disabled
            initialValue={props.curentDefault}
          />
        </ProForm.Group>

        {row.length > 0 &&
          Object.keys(rolePermissionList).length > 0 &&
          row.map((item: string, index: number) => {
            const list = [];

            for (let i = 0; i < rolePermissionList[item].length; i++) {
              // list[rolePermissionList[item][i].id] = rolePermissionList[item][i].moduleActionName;
              list.push([
                rolePermissionList[item][i].id,
                rolePermissionList[item][i].moduleActionName,
                rolePermissionList[item][i].isSelect,
                rolePermissionList[item][i].isDefault,
              ]);
            }

            return (
              // <ProForm.Group key={index} title={'rolePermissionList[item][1].moduleName'}>
              <ProForm.Group key={index} title={rolePermissionList[item][0].moduleName}>
                {list.map((item) => {
                  return (
                    <ProFormSwitch
                      key={item[0]}
                      name={item[0]}
                      label={item[1]}
                      initialValue={item[2] === '1' ? true : false}
                      disabled={item[3] === '1' ? true : false}
                    />
                  );
                })}
              </ProForm.Group>
            );
          })}
      </DrawerForm>
    </div>
  );
};
